<template>
	<div class="my">
		<header>
			<aside>
				<router-link to="/mobile/login">
					<img src="@/assets/img/mobile/user-logo-004.png" v-if="img ==undefined"/>
				</router-link>
				<img :src="`http://127.0.0.1/api/public/showimg/${img}`" v-if="img !=undefined"/>
			</aside>
			<h4 v-if="img ==undefined">点击头像登录</h4>
			<h4 v-if="img !=undefined">{{name}}</h4>
			<button @click="tc()"  v-if="img !=undefined">退出登录</button>
		</header>
		<ul>
			<li>
				<router-link to="/mobile/dd">
					<i class="el-icon-s-order"></i>
					<h5 style="color: black;">我的订单</h5>
				</router-link>
			</li>
			<li>
				<router-link to="/mobile/gwc">
					<i class="el-icon-shopping-cart-1"></i>
					<h5 style="color: black;">我的购物车</h5>
				</router-link>
			</li>
			<li>
				<router-link to="/mobile/sc">
					<i class="el-icon-collection"></i>
					<h5 style="color: black;">我的收藏</h5>
				</router-link>
			</li>
		</ul>
		
		<div class="banner">
			<el-carousel :interval="5000" arrow="nerver" height="10rem">
			    <el-carousel-item v-for="(item,i) in bannerlist" :key="item.id" v-if="i < 4">
			     <img :src="`http://127.0.0.1/api/public/showimg/${item.picture}`"/>
			    </el-carousel-item>
			  </el-carousel>
		</div>
		
		<div class="xx">
			<router-link to="/mobile/home">新书上市</router-link>
		</div>
	</div>
</template>

<script>
	export default{
		name : 'My',
		data() {
			return{
				bannerlist: [],
				img : '',
				name : '',
			}
		},
		created() {
			this.$get('/api/public/findHot/1/6').then((resp)=>{
				this.bannerlist = resp.data.data;
				this.img = this.$store.state.img;
				this.name = this.$store.state.name;
			});
		},
		methods:{
			tc(){
				localStorage.removeItem('token');
				this.img = undefined;
				this.name = undefined;
				this.$store.state.img = undefined;
				this.$store.state.name = undefined;
			}
		}
	}
</script>

<style scoped>
	.my{
		position: relative;
		top: 56px;
	}
	.my header {
		background-color: #f5d5a0;
		color: white;
		display: flex;
		align-items: center;
	}

	.my header button{
		border: none;
		margin-left: 5rem;
		background-color: #f5d5a0;
	}
	
	.my header aside img {
		width: 4rem;
		height: 4rem;
		border-radius: 50%;
		margin: 2rem 2rem;
	}

	.my ul {
		margin: 1rem 2rem 1rem ;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		text-align: center;
	}

	.my ul li {
		width: 33%;
		margin-bottom: 0.5rem;
	}

	.my ul li i {
		font-size: 5rem;
		color: #f5d5a0;
	}
	.my .xx{
		height: 2rem;
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.my .xx a{
		font-size: 2rem;
		color: red;
	}
	.my .banner{
		width: 100%;
		height: 10rem;
	}
	.my .banner img{
		width: 100%;
		height: 100%;
	}
	/* 穿刺：css用于修改固定组件样式的操作 */
	.my .banner .el-carousel /deep/ .el-carousel__button{
		height: 5px !important;
	}
	.my .banner .el-carousel /deep/ .is-active .el-carousel__button{
		background-color: #007bfd !important;
	}
</style>